<template>
  <div>
    <div class="head">
      <div class="user">
        <span class="welcome">{{ text }}</span
        >, <span class="user-name">{{ userName }}</span>
      </div>
      <div class="sousuo-box">
        <form action="/">
          <van-search
            shape="round"
            v-model="value"
            placeholder="请输入搜索关键词"
            @search="onSearch"
            :clearable="false"
          />
        </form>
      </div>
    </div>
    <div class="swi">
      <Swi :SwiDataArr="bannerImgArr"></Swi>
    </div>
    <p class="recommend">
      <span class="recommend-title"> 热卖推荐 </span>
      <!-- <span
        class="recommend-title"
        :style="!tokenString ? 'background-color: #aaa' : ''"
        @click="goCollect"
      >
        我的收藏
      </span> -->
    </p>
    <ShopItem :dataObj="dataObj" :boxStyle="boxStyle">
      <template slot="hot">
        <div class="hot">hot</div>
      </template>
    </ShopItem>
  </div>
</template>

<script>
import Swi from "../components/Swi.vue";
import ShopItem from "../components/ShopItem.vue";
import { Toast } from "vant";
export default {
  name: "Home",
  data() {
    return {
      userName: "游客",
      tokenString: sessionStorage.getItem("userToken"),
      value: "",
      bannerImgArr: [],
      dataObj: null,
      text: "",
      boxStyle: {
        justifyContent: "space-between",
      },
    };
  },
  methods: {
    onSearch(val) {
      this.$router.push({ name: "Sousuo", query: { name: val } });
    },
    getDataObj() {
      this.axios
        .get("http://www.kangliuyong.com:10002/typeProducts", {
          params: {
            appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
            key: "isHot",
            value: 1,
          },
        })
        .then((res) => {
          this.dataObj = res.data.result;
        })
        .catch((err) => {});
    },
    getData() {
      this.axios({
        method: "get",
        url: " http://www.kangliuyong.com:10002/banner",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        },
      })
        .then((res) => {
          //
          this.bannerImgArr = res.data.result;
        })
        .catch((err) => {});
    },
    getUser() {
      let tokenString = this.tokenString;
      if (tokenString) {
        let appkey = "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=";
        this.axios({
          method: "get",
          url: "http://www.kangliuyong.com:10002/findMy",
          params: {
            appkey,
            tokenString,
          },
        })
          .then((res) => {
            this.userName = res.data.result[0].nickName;
          })
          .catch((err) => {});
      }
    },
    getTime() {
      let a = new Date();
      let now = a.getHours();

      if (now >= 0 && now < 5) {
        this.text = "凌晨好";
      } else if (now >= 5 && now < 11) {
        this.text = "早上好";
      } else if (now >= 11 && now < 13) {
        this.text = "中午好";
      } else if (now >= 13 && now < 17) {
        this.text = "下午好";
      } else if (now >= 17 && now < 19) {
        this.text = "傍晚好";
      } else {
        this.text = "晚上好";
      }
    },
    // goCollect() {
    //   let tokenString = this.tokenString;
    //   if (!tokenString) {
    //     Toast("请先登录");
    //   } else {
    //     this.$router.push({ name: "Collect" });
    //   }
    // },
  },
  created() {
    this.getData();
    this.getDataObj();
    this.getUser();
    this.getTime();
  },
  components: {
    Swi,
    ShopItem,
  },
};
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  height: 42px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.7);
  .user {
    user-select: none;
    cursor: pointer;
    padding: 0 4px;
    font-weight: bold;
    // line-height: 42px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #777;
    .welcome {
      width: 50px;
      display: inline-block;
      text-align: center;
    }
    .user-name {
      color: rgb(12, 52, 186);
      display: inline-block;
      width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.swi {
  margin: 10px auto;
  background-color: transparent;
}

/deep/ .van-search {
  padding: 0;
  background-color: transparent;
}
.recommend {
  background-color: #fff;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.recommend-title {
  padding: 10px 30px 10px 20px;
  color: #fff;
  font-size: 18px;
  border-top-right-radius: 20px;
  background-color: rgb(12, 52, 186);
  display: inline-block;
  // margin-left: 20px;
}
.hot {
  position: absolute;
  top: 10px;
  left: 30px;
  padding: 2px 4px 6px;
  background-color: rgb(12, 52, 186);
  text-align: center;
  color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
</style>